<template>
	<view class="custom-tabbar">
		<view @click="tabbar(item.path)" :style="itemStyle" class="tab-item" v-for="item in tab">
			<image :style="iconStyle" class="tab-icon" :src="cloudStorage+(path==item.path?item.selectIcon:item.icon)">
			</image>
			<view
				:style="'color:'+(path==item.path?config.textActiveColor:config.textColor)+';font-size:'+config.textSize"
				class="tab-text">{{item.text||(identity==1?'简历':'发布')}}</view>
		</view>
		<view class="scan">
			<view class="scan-in"
				@click="navigate(identity==1?'/page_other/resume/index':'/page_other/position/position_manage')">
				<image :src="cloudStorage+'tabbar/'+(identity==1?'resume.png':'release.png')"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				path: '',
				tab: [{
						text: '首页',
						path: '/pages/home/index',
						icon: 'tabbar/home.png',
						selectIcon: 'tabbar/home_select.png'
					},
					{
						text: '推荐',
						path: '/pages/found/index',
						icon: 'tabbar/recommend.png',
						selectIcon: 'tabbar/recommend_select.png'
					},
					{
						text: '',
						path: '',
						icon: '',
						selectIcon: ''
					},
					{
						text: '消息',
						path: '/pages/message/index',
						icon: 'tabbar/message.png',
						selectIcon: 'tabbar/message_select.png'
					},
					{
						text: '我的',
						path: '/pages/mine/index',
						icon: 'tabbar/mine.png',
						selectIcon: 'tabbar/mine_select.png'
					},
				],
				config: {
					iconSize: '50rpx',
					textColor: '#D8D8D8',
					textActiveColor: '#D8D8D8',
					textSize: '28rpx',
				}
			}
		},
		mounted() {
			let pages = getCurrentPages();
			this.path = '/' + pages[pages.length - 1].__route__;
			uni.$on('pathChange', (e) => {
				this.path = e;
			})
		},
		methods: {
			tabbar(path) {
				if (path) {
					uni.redirectTo({
						url: path
					})
				}
			}
		},
		computed: {
			identity() {
				return this.$store.getters.identity;
			},
			itemStyle() {
				return ''
			},
			iconStyle() {
				return `width:${this.config.iconSize};height:${this.config.iconSize}`
			},
		}
	}
</script>

<style lang="scss" scoped>
	.custom-tabbar {

		view,
		text,
		navigator,
		input,
		picker,
		button,
		scroll-view,
		textarea,
		image {
			box-sizing: border-box;
		}
	}

	.custom-tabbar {
		z-index: 999;
		width: 100vw;
		height: 160rpx;
		padding-bottom: 20rpx;
		background: #fff;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		border-radius: 7px 7px 0 0;

		.tab-item {
			flex-grow: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.tab-icon {
				margin-bottom: 10rpx;
			}
		}

		.tab-item:nth-child(2) {
			margin-right: 30rpx;
		}

		.tab-item:nth-child(4) {
			margin-left: 30rpx;
		}

		.scan {
			position: absolute;
			z-index: 9999;
			background: #F7F6F9;
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			transform: translate(-50%, -50%);
			left: 50%;
			top: 0;
			padding: 20rpx;

			.scan-in {
				z-index: 9999;
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background-image: linear-gradient(to right bottom, #2EC2FF, #5D8EFD);
				display: flex;
				align-items: center;
				justify-content: center;

				image {
					width: 50%;
					height: 50%;
				}
			}
		}
	}

	.custom-tabbar::before {
		content: "";
		position: absolute;
		top: -2rpx;
		/* 调整阴影层位置以覆盖在图片上方 */
		left: 0;
		width: 100%;
		height: 4rpx;
		/* 阴影高度 */
		background: #f3ebeb;
		/* 阴影颜色和透明度 */
	}
</style>